<template>
    <a-spin :spinning="confirmLoading">
        <j-form-container :disabled="formDisabled">
            <a-form-model ref="form" :model="model"  :rules="validatorRules" slot="detail">
                <!-- useful_auto_generate_section_start -->

                <a-row>
                    <a-col :span="12">
                        <a-form-model-item label="账号"  :labelCol="labelCol_2" :wrapperCol="wrapperCol_2" required >
                            <a-input v-model="model.user" placeholder="请输入账号" />
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-model-item label="密码"  :labelCol="labelCol_2" :wrapperCol="wrapperCol_2" required >
                            <a-input v-model="model.pwd" placeholder="请输入密码" />
                        </a-form-model-item>
                    </a-col>
                    <!--                    <a-col :span="8">-->
                    <!--                        <a-form-model-item label="生产日期"  :labelCol="labelCol_3" :wrapperCol="wrapperCol_3" required >-->
                    <!--                            <a-date-picker v-model="model.gmtBuild" placeholder="请选择生产日期" format="YYYY-MM-DD" @change="(v)=>handleDateChange(v,{})"/>-->
                    <!--                        </a-form-model-item>-->
                    <!--                    </a-col>-->
                    <!--                    <a-col :span="8">-->
                    <!--                        <a-form-model-item label="过期日期"  :labelCol="labelCol_3" :wrapperCol="wrapperCol_3" required >-->
                    <!--                            <a-date-picker v-model="model.gmtExpire" placeholder="请选择过期日期" format="YYYY-MM-DD" />-->
                    <!--                        </a-form-model-item>-->
                    <!--                    </a-col>-->
                </a-row>

                <a-row>
<!--                    <a-col :span="12">-->
<!--                        <a-form-model-item label="是否启用"  :labelCol="labelCol_2" :wrapperCol="wrapperCol_2" required >-->
<!--                            <a-select v-model="model.active" :options="activeOptions"  />-->
<!--                        </a-form-model-item>-->
<!--                    </a-col>-->
                    <a-col :span="12">
                        <a-form-model-item label="是否过期"  :labelCol="labelCol_2" :wrapperCol="wrapperCol_2" >
                            <a-select v-model="model.status" :options="statusOptions"  />
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-model-item label="角色"  :labelCol="labelCol_2" :wrapperCol="wrapperCol_2" >
                            <a-select v-model="model.role" :options="roleOptions"  />
                        </a-form-model-item>
                    </a-col>
                </a-row>





<!--                <a-row>-->
<!--                    <a-col :span="24">-->
<!--                        <a-form-model-item label="Cookie"  :labelCol="labelCol_1" :wrapperCol="wrapperCol_1" >-->
<!--                            <a-textarea v-model="model.cookie" placeholder="请输入Cookie" />-->
<!--                        </a-form-model-item>-->
<!--                    </a-col>-->
<!--                </a-row>-->
                <!-- useful_auto_generate_section_end -->

            </a-form-model>
        </j-form-container>
    </a-spin>
</template>


<script>

    import { httpAction, getAction,addYearsToDateString } from '@/api/manage'
    import { getDataOptionList,requestSetData, requestSetOption } from '@/utils/util'
    import { FormMixin } from '@/mixins/FormMixin'
    import moment from 'moment'

    export default {
        name: 'UserForm',
        mixins: [ FormMixin],
        components: {
        },
        props: {
            //表单禁用
            disabled: {
                type: Boolean,
                default: false,
                required: false
            }
        },
        data () {
            return {
                model:{
                },
                confirmLoading: false,
                validatorRules: {
                },
                //useful_auto_generate_section_start
                statusOptions:getDataOptionList('userStatusList'),
                roleOptions:getDataOptionList('roleList'),
                activeOptions:getDataOptionList('userActiveList'),
                auditUserIdOptions:[],
                //useful_auto_generate_section_end
                positionOptions:[],
                url: {
                    add: "/user/save",
                    edit: "/user/update",
                    queryById: "/user/detail"
                },
                filter:(inputValue, path) => {
                    return path.some(option => option.title.toLowerCase().indexOf(inputValue.toLowerCase()) > -1);
                },
            }
        },
        computed: {
            formDisabled(){
                return this.disabled
            },
        },
        created () {
            let $this = this;
            //useful_auto_generate_section_start
            // requestSetOptions("/user/anonymous/user/listAll",{},function(options){$this.auditUserIdOptions=options;},{label:'userName',value:'id'});
            //useful_auto_generate_section_end
            // requestSetData("/system/anonymous/dataDict/listTree",{value:'userPosition',idToValue:true},function(options){$this.positionOptions=options[0].children;},{});

            //备份model原始值
            this.modelDefault = JSON.parse(JSON.stringify(this.model));


        },
        methods: {
            add () {
                this.edit(this.modelDefault);
            },
            edit (record) {
                this.model = Object.assign({}, record);
                this.visible = true;
            },
            handleChange(value) {
                // console.log(`selected `);
            },
            onChange(e) {
                console.log('radio1 checked', e.target.value);
            },
            handleDateChange(value,options) {
                console.log("timeValue="+value);
                // let dateArray = value.toString().split(",")
                let format = options['format'] || 'YYYY-MM-DD';
                let frmtValue = value.format(format);
                let gmtExpire = addYearsToDateString(frmtValue,5);
                this.model.gmtExpire = gmtExpire;
            },
            submitForm () {
                const that = this;
                // 触发表单验证
                this.$refs.form.validate(valid=>{
                    if (valid) {
                        that.confirmLoading = true;
                        let httpurl = '';
                        if(!this.model.id){
                            httpurl+=this.url.add;
                        }else{
                            httpurl+=this.url.edit;
                        }
                        httpAction(httpurl,this.model,"post").then((res)=>{
                            if(res.success){
                                that.$message.success(res.message);
                                that.$emit('ok');
                            }else{
                                that.$message.warning(res.message);
                            }
                        }).finally(() => {
                            that.confirmLoading = false;
                        })
                    }

                })
            },
        }
    }
</script>
